<template>
  <div class="position-absolute z-index-999">
    <CommonHeader/>
    <el-breadcrumb style="height: 45px;margin:0 3px" class="flex_ycenter rounded-5 bg-white px-7" v-if="show" separator="/">
      <img style="width: 15px" class="mr-2" :src="homeIcon" alt="">
      <el-breadcrumb-item :key="item.name" v-for="item in userStore.state.breadcrumbList" :to="{ path: item.path, query: item.query }">{{$t(item.name)}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div v-loading="userStore.state.loading" element-loading-custom-class="vv-100" class="pt-20">
    <router-view/>
  </div>
  <!-- <div>
    <common-footer/>
  </div> -->
</template>
<script setup>
import CommonHeader from '@/components/CommonHeader.vue'
import CommonFooter from '@/components/CommonFooter.vue'
import homeIcon from '@/assets/images/Business-Category(KuDataX).png'
import { computed, watch, reactive } from 'vue'
import { useRouter } from 'vue-router'
import userStore from '@/store/index'
const router = useRouter()
const state = reactive({
  breadcrumbList: []
})
const show = computed(() => router.currentRoute.value.name !== 'home')
watch(() => userStore.state.breadcrumbList.length, (newVal, oldVal) => {
  state.breadcrumbList = Array.from(new Set(userStore.state.breadcrumbList))
})

</script>

<style lang="scss">
#app{
  background: #fff;
}
.businessP{
  p{
    width:100%;
    height: 85px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    word-break:break-all;
    line-height: 20px !important;
  }
}
</style>
